import { Form, Input } from 'antd-mobile'
import { connect, useHistory } from 'umi'
import React from 'react'

function Register(props:any) {
    const history = useHistory()
    const [form] = Form.useForm()
    const register = async ()=>{
        await form.validateFields()
        const data = form.getFieldsValue()
        fetch("/admin/base/open/register",{
            method:"POST",
            body:JSON.stringify(data),
            headers:{
                "Content-Type":"application/json"
            }
        }).then(res=>res.json()).then(res=>{
            console.log(res)
            if(res.code!==1000) return
            sessionStorage.setItem('userInfo',JSON.stringify(res.data))
            props.dispatch({
                type:'example/setUserInfo',
                payload:res.data
            })
        })
    }
    return (
        <div className='login'>
            <div className='login-content'>
                <h1>注册</h1>
                <Form layout='horizontal' form={form}>
                    <Form.Item label="昵称" name='nickName'>
                        <Input placeholder='请输入昵称'></Input>
                    </Form.Item>
                    <Form.Item label="手机号" rules={[{
                        required: true,
                        pattern: /^1[3456789]\d{9}$/,
                        message: "请输入手机号"
                    }]}
                        name='username'>
                        <Input placeholder='请输入手机号'></Input>
                    </Form.Item>
                    <Form.Item label="密码" rules={[{
                        required: true,
                        message: "请输入密码"
                    }]}
                        name='password'>
                        <Input placeholder='请输入密码' type='password'></Input>
                    </Form.Item>
                </Form>
                <div className='submit-login' onClick={() => register()}>注册</div>
                <div onClick={() => {
                    history.push('/login')
                }}>去登录</div>
            </div>
        </div>
    )
}
export default connect()(Register)